<!DOCTYPE >
<html lang="en">

	<head>
		<title>口袋恋人-充值</title>
		<meta charset="UTF-8">
		<meta name="renderer" content="webkit">
		<meta name="format-detection" content="telephone=no">
		<meta http-equiv="X-UA-Compatible" content="IE=Edge">
		<meta name="keywords" content="" />
		<meta name="description" content="" />
		<meta name="author" content="广州小蚕科技" />
		<meta http-equiv="X-UA-Compatible" content="edge" />
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no, minimal-ui">
		<link rel="icon" type="image/vnd.microsoft.icon" href="/favicon.ico">
		<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
		<link rel="apple-touch-icon-precomposed" sizes="57x57" href="/img/icon-57.png">
		<link rel="apple-touch-icon-precomposed" sizes="72x72" href="/img/icon-72.png">
		<link rel="apple-touch-icon-precomposed" sizes="114x114" href="/img/icon-114.png">
		<link rel="apple-touch-icon-precomposed" sizes="144x144" href="/img/icon-144.png">
		<link rel="stylesheet" type="text/css" href="/css/public/reset.css">
		<script src="/js/public/plugin/jquery-1.9.1.min.js"></script>
		<style type="text/css">
			.main_content {
				-webkit-tap-highlight-color: transparent;
				max-width: 700px;
				min-width: 300px;
				background-color: #fff;
				margin: 0 auto;
				padding: 15px;
			}
			.c666 {
				color: #666;
			}
			.pink {
				color: #f66c95;
			}
			.info {
				width: 100%;
				margin-top: 10px;
				font-size: 14px;
				line-height: 16px;
				color: #333
			}
			.needPay {
				font-size: 20px!important;
				color: #f66c95;
			}
			.title_content {
				position: relative;
				height: 50px;
				text-align: center;
				background: #f66c95;
				line-height: 50px;
				color: #fff;
				font-size: 18px;
			}
			.title_img {
				width: 32px;
				height: 32px;
				position: absolute;
				left: 10px;
				top: 10px;
			}
			.payway {
				-webkit-tap-highlight-color: transparent;
				display: inline-block;
				width: 50%;
				height: 30px;
				line-height: 30px;
				text-align: center;
				font-size: 13px;
				color: #f66c95;
				border: 2px solid #f66c95;
				border-radius: 5px;
				margin-top: 9px;
			}
			h1 {
				width: 100%;
				height: 30px;
				line-height: 30px;
				font-size: 16px;
				border-bottom: 2px solid #f66c95;
			}
			ul li {
				-webkit-tap-highlight-color: transparent;
				display: inline-block;
				width: 100%;
				height: 30px;
				line-height: 30px;
				text-align: center;
				font-size: 13px;
				color: #333;
				border: 2px solid #ccc;
				border-radius: 5px;
				margin-top: 9px;
			}
			.cur {
				border: 2px solid #f66c95;
				color: #f66c95
			}
			.pay {
				margin-top: 9px;
				width: 100%;
				height: 45px;
				line-height: 45px;
				font-size: 16px;
				text-align: center;
				background: #f66c95;
				color: #fff;
				border-radius: 5px;
				border: 2px solid #f66c95
			}
			.input_content {
				width: 100%;
				height: 40px;
				font-size: 16px;
				color: #333;
				border-bottom: 1px solid #ccc
			}
			.input_content input {
				-webkit-tap-highlight-color: transparent;
				border: none;
				line-height: 40px
			}
			.input_content span {
				display: inline-block;
				height: 100%;
				padding-right: 30px;
				line-height: 40px
			}
			;
			.needPay {
				font-size: 20px!important;
				color: #f66c95;
			}
		</style>
		<script type="text/javascript">
			oPay = {
				operation: function() {
					$(".molianId").focus();
					$("ul li").on("touchstart", function() {
						if (!$(this).hasClass("cur")) {
							$(this).addClass("cur").siblings().removeClass("cur");
							$(".needPay").html($(this).attr("price"));
						}
					})
					if (navigator.userAgent.indexOf('iPhone') == -1 || navigator.userAgent.indexOf('Android') == -1) {
						$("ul li").on("click", function() {
							if (!$(this).hasClass("cur")) {
								$(this).addClass("cur").siblings().removeClass("cur");
								$(".needPay").html($(this).attr("price"));
							}
						})
					}
					$(".pay").on("click", function() {
						if ($(".molianId").val() != $(".remolianId").val()) {
							alert("账户不一致");
							return;
						}
						var price = $(".cur").attr("price");
						var molianId = $(".molianId").val();
						$.post("/wxpay", {
							"molianId": molianId
						}, function(json) {
							window.location.href = "/wxpay/payIndex?code_url=" + json.code_url;
						}, 'json');
						//						$.post("/wap/pay",{
						//							"price":price,
						//							"molianId":molianId
						//						},function(json){
						//							if(json.code==0){
						//								window.location=json.url;
						//							}else{
						//								alert(json.msg);
						//							}
						//							
						//						},'json');
					})
				},
				init: function() {
					this.operation();
				}
			}
			$(document).ready(function() {
				oPay.init();
			})
		</script>
	</head>

	<body>
		<div class="title_content">
			<img class="title_img" src="/img/icon_pay.png"> 口袋恋人
		</div>
		<div class="main_content">
			<h1 class="pink">账户</h1>
			<div class="input_content">
				<span>充值账户</span>
				<input class="molianId" type="text" value="<%=molianId%>" placeholder="请输入您的口袋号">
			</div>
			<div class="input_content">
				<span>确认账户</span>
				<input class="remolianId" type="text" value="<%=molianId%>" placeholder="请确认您的口袋号">
			</div>
			<P class="info">充值方式</P>
			<div>
				<p class="payway">支付宝支付</p>
				<p class="payway">微信支付</p>
			</div>
			<h1 class="pink" style="margin-top:5px">时光充值</h1>
			<p class="info">时光是口袋恋人应用中的虚拟货币，用于购买聊天时间和打电话，获得虚拟恋人的陪伴</p>
			<ul>
				<li class="cur" price="5"><span class="pink">￥5元</span>购买50时光</li>
				<li price="20"><span class="pink">￥20元</span>购买200时光</li>
				<li price="40"><span class="pink">￥40元</span>购买400时光</li>
				<li price="60"><span class="pink">￥60元</span>购买600时光</li>
				<li price="120"><span class="pink">￥120元</span>购买1200时光</li>
				<li price="600"><span class="pink">￥600元</span>购买6000时光</li>
			</ul>
			<p class="info" style="margin-top:20px;">应付金额： <span class="needPay">5</span>元</p>
			<p class="pay">确认支付</p>
		</div>
	</body>

</html>